import React, { Suspense, useState } from "react";
import { List, Page, Icon, useNavigate, Header, Box, Swiper } from "zmp-ui";
import styles from "./index.module.scss";
const HomePage: React.FunctionComponent = () => {
  const navigate = useNavigate();
  const [bannerList, setBannerList] = useState([
    {
      src: "https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg",
    },
    {
      src: "https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg",
    },
    {
      src: "https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg",
    },
    {
      src: "https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg",
    },
    {
      src: "https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg",
    },
  ]);
  return (
    <Page className="relative flex-1 flex flex-col">
      <div className={styles["home-banner"]}>
        <Swiper autoplay disableSwipe>
          {bannerList.map((item) => {
            return (
              <Swiper.Slide key={item.src}>
                <img className="slide-img" src={item.src} />
              </Swiper.Slide>
            );
          })}
        </Swiper>
      </div>
    </Page>
  );
};

export default HomePage;
